<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">整改分析</text>
      <view class="nav-right" @tap="goToMessages">
        <text class="fa fa-bell-o search-icon fa-gray"></text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 搜索框 -->
      <view class="search-section">
        <view class="search-box">
          <text class="fa fa-search search-icon"></text>
          <input
            class="search-input"
            placeholder="搜索整改项目或问题类型"
            placeholder-style="color: #9ca3af"
            v-model="searchText"
          />
        </view>
      </view>

      <!-- 状态标签 -->
      <view class="tabs-section">
        <view class="tabs">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['tab-item', currentTab === index ? 'tab-item-active' : '']"
            @tap="switchTab(index)"
          >
            <text>{{ tab }}</text>
          </view>
        </view>
      </view>

      <!-- 整改统计 -->
      <view class="stats-section">
        <view class="stats-card">
          <view class="stats-header">
            <text class="stats-title">整改统计</text>
            <text class="stats-subtitle">本月</text>
          </view>
          <view class="stats-grid">
            <view class="stat-item stat-red">
              <text class="stat-value">8</text>
              <text class="stat-label">待整改</text>
            </view>
            <view class="stat-item stat-yellow">
              <text class="stat-value">12</text>
              <text class="stat-label">整改中</text>
            </view>
            <view class="stat-item stat-green">
              <text class="stat-value">25</text>
              <text class="stat-label">已完成</text>
            </view>
            <view class="stat-item stat-blue">
              <text class="stat-value">89%</text>
              <text class="stat-label">完成率</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 整改项目列表 -->
      <view class="improvement-list">
        <!-- 项目1 - 待整改 -->
        <view class="improvement-card">
          <view class="card-content">
            <view class="card-icon card-icon-red">
              <text class="fa fa-warning fa-red"></text>
            </view>
            <view class="card-info">
              <text class="card-title">外科手术室无菌操作规范问题</text>
              <text class="card-meta">问题类型：操作规范</text>
              <text class="card-time">发现时间：2025.01.17 11:45</text>
              <text class="card-dept">责任科室：外科手术室</text>
              <view class="card-tags">
                <view class="tag tag-red">
                  <text>待整改</text>
                </view>
                <text class="tag-level tag-level-red">一级质控</text>
              </view>
              <view class="card-description">
                <text class="desc-text"
                  >问题描述：手术器械消毒不彻底，部分医护人员操作不规范，存在交叉感染风险</text
                >
              </view>
              <view class="card-footer">
                <text class="footer-person">责任人：张主任</text>
                <text class="footer-overdue">超期2天</text>
              </view>
            </view>
            <view class="card-action" @tap="startImprovement(1)">
              <text class="fa fa-play-circle-o fa-red"></text>
            </view>
          </view>
        </view>

        <!-- 项目2 - 整改中 -->
        <view class="improvement-card">
          <view class="card-content">
            <view class="card-icon card-icon-yellow">
              <text class="fa fa-wrench fa-yellow"></text>
            </view>
            <view class="card-info">
              <text class="card-title">ICU病房护理质量改进</text>
              <text class="card-meta">问题类型：护理质量</text>
              <text class="card-time">开始时间：2025.01.15 09:00</text>
              <text class="card-dept">责任科室：ICU</text>
              <view class="card-tags">
                <view class="tag tag-yellow">
                  <text>整改中</text>
                </view>
                <text class="tag-level tag-level-yellow">二级质控</text>
              </view>
              <view class="card-description">
                <text class="desc-text"
                  >问题描述：病房清洁标准执行不一致，护理记录填写不完整</text
                >
              </view>
              <view class="progress-section">
                <view class="progress-header">
                  <text class="progress-label">整改进度</text>
                  <text class="progress-value">70%</text>
                </view>
                <view class="progress-bar">
                  <view class="progress-fill" style="width: 70%"></view>
                </view>
              </view>
              <view class="card-footer">
                <text class="footer-person">责任人：李护士长</text>
                <text class="footer-status footer-status-green">按期进行</text>
              </view>
            </view>
            <view class="card-action" @tap="continueImprovement(2)">
              <text class="fa fa-edit fa-yellow"></text>
            </view>
          </view>
        </view>

        <!-- 项目3 - 已完成 -->
        <view class="improvement-card">
          <view class="card-content">
            <view class="card-icon card-icon-green">
              <text class="fa fa-check-circle-o fa-green"></text>
            </view>
            <view class="card-info">
              <text class="card-title">急诊科抢救设备维护改进</text>
              <text class="card-meta">问题类型：设备管理</text>
              <text class="card-time">完成时间：2025.01.19 14:30</text>
              <text class="card-dept">责任科室：急诊科</text>
              <view class="card-tags">
                <view class="tag tag-green">
                  <text>已完成</text>
                </view>
                <text class="tag-level tag-level-green">三级质控</text>
              </view>
              <view class="card-description">
                <text class="desc-text"
                  >问题描述：部分抢救设备维护记录不完整，定期检查执行不到位</text
                >
              </view>
              <view class="card-solution">
                <text class="solution-text"
                  >整改措施：制定设备维护SOP，建立电子化维护记录系统，指定专人负责</text
                >
              </view>
              <view class="card-footer">
                <text class="footer-person">责任人：陈主任</text>
                <text class="footer-status footer-status-green">提前完成</text>
              </view>
            </view>
            <view class="card-action" @tap="viewReport(3)">
              <text class="fa fa-file-text-o fa-green"></text>
            </view>
          </view>
        </view>

        <!-- 项目4 - 分析中 -->
        <view class="improvement-card">
          <view class="card-content">
            <view class="card-icon card-icon-blue">
              <text class="fa fa-bar-chart fa-blue"></text>
            </view>
            <view class="card-info">
              <text class="card-title">药房药品管理流程优化</text>
              <text class="card-meta">问题类型：流程管理</text>
              <text class="card-time">分析开始：2025.01.20 10:00</text>
              <text class="card-dept">责任科室：药剂科</text>
              <view class="card-tags">
                <view class="tag tag-blue">
                  <text>根因分析</text>
                </view>
                <text class="tag-level tag-level-blue">二级质控</text>
              </view>
              <view class="card-description">
                <text class="desc-text"
                  >问题描述：药品盘点周期过长，库存数据不准确，影响临床用药</text
                >
              </view>
              <view class="analysis-grid">
                <view class="analysis-item analysis-blue">
                  <text class="analysis-title">人员因素</text>
                  <text class="analysis-desc">培训不足</text>
                </view>
                <view class="analysis-item analysis-purple">
                  <text class="analysis-title">流程因素</text>
                  <text class="analysis-desc">标准缺失</text>
                </view>
              </view>
              <view class="card-footer">
                <text class="footer-person">分析师：王药师</text>
                <text class="footer-status footer-status-blue">分析中</text>
              </view>
            </view>
            <view class="card-action" @tap="viewAnalysis(4)">
              <text class="fa fa-search"></text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      searchText: "",
      currentTab: 0,
      tabs: ["全部", "待整改", "整改中", "已完成"],
    };
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goToMessages() {
      uni.navigateTo({
        url: "/pages/messages",
      });
    },
    switchTab(index) {
      this.currentTab = index;
    },
    startImprovement(id) {
      uni.showToast({
        title: "开始整改",
        icon: "none",
      });
    },
    continueImprovement(id) {
      uni.showToast({
        title: "继续整改",
        icon: "none",
      });
    },
    viewReport(id) {
      uni.showToast({
        title: "查看报告",
        icon: "none",
      });
    },
    viewAnalysis(id) {
      uni.showToast({
        title: "查看分析",
        icon: "none",
      });
    },
    goToHome() {
      uni.navigateTo({
        url: "/pages/home",
      });
    },
    goToProfile() {
      uni.navigateTo({
        url: "/pages/profile",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-left {
  position: absolute;
  left: 32rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111827;
}

.nav-right {
  position: absolute;
  right: 32rpx;
  font-size: 36rpx;
  color: #6b7280;
}

/* 内容区域 */
.content {
  flex: 1;
}

/* 搜索框 */
.search-section {
  padding: 24rpx 32rpx;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 16rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 16rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.search-icon {
  font-size: 32rpx;
  color: #9ca3af;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #111827;
}

/* 标签栏 */
.tabs-section {
  padding: 0 32rpx;
}

.tabs {
  display: flex;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  border-bottom: 1rpx solid #e5e7eb;
}

.tab-item {
  flex: 1;
  padding: 24rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #6b7280;
  position: relative;
}

.tab-item-active {
  color: #2563eb;
  font-weight: 500;
}

.tab-item-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background: #2563eb;
  border-radius: 2rpx;
}

/* 整改统计 */
.stats-section {
  padding: 0 32rpx;
  margin-top: 24rpx;
}

.stats-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.stats-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.stats-subtitle {
  font-size: 24rpx;
  color: #6b7280;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
  text-align: center;
}

.stat-item {
  border-radius: 16rpx;
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.stat-red {
  background: #fee2e2;
}

.stat-yellow {
  background: #fef3c7;
}

.stat-green {
  background: #dcfce7;
}

.stat-blue {
  background: #dbeafe;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
}

.stat-red .stat-value {
  color: #dc2626;
}

.stat-yellow .stat-value {
  color: #ca8a04;
}

.stat-green .stat-value {
  color: #16a34a;
}

.stat-blue .stat-value {
  color: #2563eb;
}

.stat-label {
  font-size: 24rpx;
  color: #4b5563;
}

/* 整改列表 */
.improvement-list {
  padding: 24rpx 32rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.improvement-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.card-content {
  display: flex;
  gap: 24rpx;
}

.card-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  flex-shrink: 0;
}

.card-icon-red {
  background: #fecaca;
}

.card-icon-yellow {
  background: #fde68a;
}

.card-icon-green {
  background: #bbf7d0;
}

.card-icon-blue {
  background: #bfdbfe;
}

.card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #111827;
}

.card-meta,
.card-time,
.card-dept {
  font-size: 24rpx;
  color: #6b7280;
}

.card-tags {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-top: 8rpx;
  margin-bottom: 8rpx;
}

.tag {
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.tag-red {
  background: #fee2e2;
  color: #b91c1c;
}

.tag-yellow {
  background: #fef3c7;
  color: #b45309;
}

.tag-green {
  background: #dcfce7;
  color: #15803d;
}

.tag-blue {
  background: #dbeafe;
  color: #1e40af;
}

.tag-level {
  font-size: 24rpx;
  font-weight: 500;
}

.tag-level-red {
  color: #dc2626;
}

.tag-level-yellow {
  color: #ca8a04;
}

.tag-level-green {
  color: #16a34a;
}

.tag-level-blue {
  color: #2563eb;
}

.card-description,
.card-solution {
  background: #f9fafb;
  padding: 16rpx;
  border-radius: 16rpx;
  line-height: 1.5;
}

.card-solution {
  background: #dcfce7;
}

.desc-text,
.solution-text {
  font-size: 24rpx;
  color: #4b5563;
  display: block;
}

.progress-section {
  margin-top: 8rpx;
  margin-bottom: 8rpx;
}

.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.progress-label {
  font-size: 24rpx;
  color: #6b7280;
}

.progress-value {
  font-size: 24rpx;
  font-weight: 500;
  color: #4b5563;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
  background: #e5e7eb;
  border-radius: 999rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, #eab308, #f97316);
  border-radius: 999rpx;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8rpx;
}

.footer-person {
  font-size: 24rpx;
  color: #6b7280;
}

.footer-overdue {
  font-size: 24rpx;
  color: #dc2626;
}

.footer-status {
  font-size: 24rpx;
}

.footer-status-green {
  color: #16a34a;
}

.footer-status-blue {
  color: #2563eb;
}

.card-action {
  font-size: 28rpx;
  color: #2563eb;
  align-self: flex-start;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
  margin-top: 8rpx;
  margin-bottom: 8rpx;
}

.analysis-item {
  padding: 16rpx;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.analysis-blue {
  background: #dbeafe;
}

.analysis-purple {
  background: #f3e8ff;
}

.analysis-title {
  font-size: 24rpx;
  font-weight: 500;
}

.analysis-blue .analysis-title {
  color: #2563eb;
}

.analysis-purple .analysis-title {
  color: #9333ea;
}

.analysis-desc {
  font-size: 24rpx;
  color: #4b5563;
}

/* 底部导航 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  color: #6b7280;
}

.tab-item-active {
  color: #2563eb;
}

.tab-icon {
  font-size: 36rpx;
}

.tab-label {
  font-size: 20rpx;
}

.tab-item-active .tab-label {
  font-weight: 500;
}
</style>

